Skip to content

feat(ios): show table rows and query results in a grid - #3963

Merged
datlechin merged 5 commits into
TableProApp:mainfrom
J2TeamNNL:feat/ios-row-grid
Nov 1, 2026
Merged

datlechin merged 5 commits into
TableProApp:mainfrom
J2TeamNNL:feat/ios-row-grid

Conversation

@J2TeamNNL

@J2TeamNNL J2TeamNNL commented Oct 31, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Table rows and query results can show as a grid: one line per row, a header that stays at the top, columns that scroll sideways, and the row's key column held at the leading edge.
  • Cards / Grid sit in the More menu of a table and of Query. One setting, com.TablePro.settings.rowLayout. With no choice made, iPhone shows cards and iPad shows the grid.
  • The default follows the device, not the size class, so Split View, Slide Over or a rotation never swaps the layout under an open row.
  • The key column is the first primary key column, the one a card titles itself with. It leads the grid, takes at most 40% of the visible width, and sits at the safe-area edge in landscape.
  • Widths come from the header and the first 50 rows, measured with the real font (semibold for headers) between 72 and 320 points. Widths, padding and both limits scale with Dynamic Type. A value is measured up to its first line or 128 characters.
  • The key column is pinned with visualEffect, so a sideways scroll changes no state and rebuilds no row. Widths are recomputed only when the columns, the first 50 rows or the text size change.
  • One two-axis scroll view keeps both scroll indicators. It does not bounce sideways when every column fits.
  • Delete Row is in the row context menu for both layouts, behind the same checks as the swipe. A grid row's long-press preview is its card.
  • VoiceOver reads a grid row as column name and value pairs.

Test plan

  • RowGridTextMeasureTests: the measured width holds the text as SwiftUI renders it, at three text sizes, on the 3x iPhone and the 2x iPad: digits, dates, capitals, CJK, accented text, semibold headers.
  • RowGridLayoutTests: key column order, the 40% cap, clamping, header vs cell font, sampling, the first-line rule and the measuring cap.
  • RowLayoutTests, RowKeyTests: the device default, a stored choice, an unknown stored value, the key column.
  • verify.sh ios and lint pass.
  • Checked on the iPhone 17 Pro and iPad Pro 11-inch simulators (iOS 27.0) with the Chinook sample: sideways and vertical scroll, landscape, a 5-row table, tap to open a row, long-press menu, query results.

Before, the first version of this PR on iPad: a line through the pinned cells, 111703... in Bytes, Albu... in the header.

Before

After, iPhone: scrolled sideways with TrackId held, and the More menu, light and dark.

After iPhone

After, iPad, grid by default, light and scrolled dark.

After iPad

Docs: TableProApp/docs#158.

Fixes #3933

The table browser gains a grid layout: one line per row, a pinned header, columns that scroll sideways and a first column that stays in view. A Cards / Grid picker in the More menu stores the choice; until one is made, regular width opens in the grid and compact width keeps the cards.
@datlechin datlechin changed the title feat(ios): show table rows in a grid as well as cards feat(ios): show table rows and query results in a grid Nov 1, 2026
@datlechin
datlechin enabled auto-merge (squash) November 1, 2026 09:10
@datlechin
datlechin merged commit 04a8bd1 into TableProApp:main Nov 1, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

iOS: show table rows in a grid, not only as cards

2 participants